<template>
	<view class="page">
		<view class="p-search">
			<view class="flex-row items-center section space-x-15">
				<image class="image_4" src="/static/order-search.png" />
				<input type="text" class="inpt" placeholder="搜索订单号、姓名、手机号等" confirm-type="search	" @confirm="onSearch">
			</view>
		</view>
		<view class="p-search-placer"></view>
		<view class="p-tab align-center">
			<view class="tab-wrap" :class="{ active: idx === tabCurIdx }" v-for="(item, idx) in tabs" :key="idx"
				@click="tapTab(idx)">
				<text class="txt">{{ item.name }}</text>
				<view class="count clamp" v-if="item.count && item.count>0">
					{{item.count}}
				</view>
			</view>
		</view>
		<view class="p-tab-placer"></view>
		<view class="plistBox" v-for="(item,index) in pledgeList" :key="index">
			<view class="pmsg">
				<view class="pline1">
					<view class="pleft">驾驶手机号: {{item.user_mobile}}</view>
					<view class="pbtn" @click="call(item.user_mobile)">联系用户</view>
				</view>
				<view class="pline">
					门店:{{item.name}}
				</view>
				<view class="pline1">
					<view class="pleft">授权单号:{{item.auth_no}}</view>
					<view class="pbtn" @click="copyClick(item.auth_no)">复制</view>
				</view>
				<view class="pline">
					授权时间:{{item.pay_time}}
				</view>
				<view class="pline">
					预计解冻时间:{{item.thawing_time}}(剩余{{item.rem_day}}天)
				</view>
			</view>
			<view class="lastlinBox">
				<view class="lastline">
					<view class="lineitem">
						<view class="num">{{item.amount}}</view>
						<view class="tit">授权金额(元)</view>
						<view class="desc">剩余可解冻 {{item.dec}}</view>
					</view>
					<view class="lineitem">
						<view class="num">{{item.deduction_price}}</view>
						<view class="tit">扣款金额(元)</view>
						<view class="desc1">待支付 0</view>
					</view>
				</view>
			</view>
			<view class="pbtnBox">
				<view class="pbtn" @click="openwin(item.id,1)" v-if="item.content==''">添加备注
				</view>
				<view class="pbtn" @click="openwin2(item.content)" v-if="item.content!==''">查看备注
				</view>
				<view class="pbtn" @click="openwin(item.id,2)">更新冻结时间</view>
				<view class="pbtn">
					<navigator :url="'/pages/Freezemerchant/deduction?id='+item.id">扣款</navigator>
				</view>
				<view class="pbtn">
					<navigator :url="'/pages/Freezemerchant/thawable?id='+item.id">解冻(可部分)</navigator>
				</view>
			</view>
			<view class="merchant_log" v-if="item.merchant_log!=''">
				<view class="merchant_top">
					<view class="merchant_tit">操作记录</view>
					<view class="merchant_r" @click="logOpen(item.id)">{{item.is_show?'收起':'展开'}}</view>
				</view>
				<view class="merchant_logBox" v-if="item.is_show">
					<view class="merchant_logitem" v-for="(logitem,i) in item.merchant_log" :key="i">
						<view class="typeBox" v-if="logitem.log_type==1 &&logitem.deduction">
							<view class="typetitle">
								<view class="yuan"></view>
								<view class="tl" v-if="logitem.deduction.type==1||logitem.deduction.type==2">
									{{logitem.deduction.type==1?'车损扣款':'违章扣款'}}{{logitem.deduction.deduction_price}}元
								</view>
								<view class="tl" v-if="logitem.deduction.type==3||logitem.deduction.type==4">
									{{logitem.deduction.type==3?'油费（含服务费扣款）':'其他扣款'}}{{logitem.deduction.deduction_price}}元
								</view>
								<view class="tr" @click="previewImg(logitem.deduction.deduction_images)">扣款凭证</view>
							</view>
							<view class="typetime">{{logitem.create_time}}</view>
							<view class="typedesc">
								<view class="desc" v-if="logitem.deduction.type==2">该笔扣款已撤销</view>
								<view class="descbtn" @click="ckdeduction(logitem.deduction)"
									v-if="logitem.deduction.type==2">撤销记录></view>
								<view class="typebtn" v-if="logitem.deduction.type==1">
									<navigator
										:url="'revokDeduction?id='+logitem.deduction.id+'&deduction_price='+logitem.deduction.deduction_price">
										撤销</navigator>
								</view>
							</view>
						</view>
						<view class="typeBox" v-if="logitem.log_type==2">
							<view class="typetitle">
								<view class="yuan"></view>
								<view class="tl">更新解冻时间{{logitem.thawing_time}}天</view>
							</view>
							<view class="typetime">{{logitem.create_time}}</view>
						</view>
						<view class="typeBox" v-if="logitem.log_type==3">
							<view class="typetitle">
								<view class="yuan"></view>
								<view class="tl">解冻押金{{logitem.unfreezing.thaw_price}}元</view>
								<view class="tr" @click="ckunfreezing(logitem.unfreezing)">解冻详情</view>
							</view>
							<view class="typetime">{{logitem.create_time}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- //1扣款，2更新冻结时间，3解冻押金 -->
		<!-- 弹窗 -->
		<view class="heibg" @click="closewin()" v-if="show_heibg"></view>
		<!-- 添加备注 -->
		<view class="addcontentBox" v-if="show_beizhu">
			<view class="ttitle">
				<view>添加备注</view>
				<image src="../../static/close.png" @click="closewin()" mode="widthFix"></image>
			</view>
			<view class="text">
				<textarea class="textarea" v-model="inputaddaccount" placeholder="只可添加一次,请认真填写"></textarea>
			</view>
			<view class="btn-sec" @click="ck_addcont()">确认添加</view>
		</view>
		<!-- 查看备注 -->
		<view class="addcontentBox" v-if="show_beizhu2">
			<view class="ttitle">
				<view>备注</view>
				<image src="../../static/close.png" @click="closewin()" mode="widthFix"></image>
			</view>
			<view class="text">
				<view class="textarea">{{bz_content}}</view>
			</view>
		</view>
		<!-- 更新冻结时间-->
		<view class="addcontentBox" v-if="show_time">
			<view class="ttitle">
				<view>更新冻结时间</view>
				<image src="../../static/close.png" @click="closewin()" mode="widthFix"></image>
			</view>
			<view class="timetips">用户续租/还车时解冻车辆押金场景，您可操作更新冻结时间</view>
			<view class="texts">
				<input class="inp" v-model="thawing_time" placeholder="时间" />
				<view>天</view>
			</view>
			<view class="btn-sec" @click="ck_time()">确定</view>
		</view>
		<!-- 撤销记录 -->
		<view class="addcontentBox" v-if="show_deduction">
			<view class="ttitle">
				<view>撤销记录</view>
				<image src="../../static/close.png" @click="closewin()" mode="widthFix"></image>
			</view>
			<view class="line">
				<view class="linl">扣款金额</view>
				<view class="linr">{{deductionData.deduction_price}}元</view>
			</view>
			<view class="line">
				<view class="linl">扣款状态</view>
				<view class="linr">{{deductionData.type==1?'扣款成功':'已撤销'}}</view>
			</view>
			<view class="line">
				<view class="linl">撤销时间</view>
				<view class="linr">{{deductionData.revok_time}}</view>
			</view>
			<view class="line">
				<view class="linl">撤销原因</view>
				<view class="linr">{{deductionData.revok_content}}</view>
			</view>
		</view>
		<!-- 解冻记录 -->
		<view class="addcontentBox" v-if="show_unfreezing">
			<view class="ttitle">
				<view>解冻记录</view>
				<image src="../../static/close.png" @click="closewin()" mode="widthFix"></image>
			</view>
			<view class="line">
				<view class="linl">解冻金额</view>
				<view class="linr">{{unfreezingData.thaw_price}}元</view>
			</view>
			<view class="line">
				<view class="linl">解冻备注</view>
				<view class="linr">{{unfreezingData.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		defineComponent,
		ref,
	} from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	const orders = defineComponent({
		props: {},
		setup(props : any, ctx : any) {
			const data = reactive({
				show_heibg: false,
				show_beizhu: false,
				show_beizhu2: false,
				show_time: false,
				show_deduction: false,
				show_unfreezing: false,
				tabCurIdx: 0,
				page: 1,
				pledgeList: [],
				tabs: [
					{ name: '进行中', status: '1' }, //,count:0
					{ name: '已完成', status: '2' },
				],
				deductionData: '',
				bz_content: '',
				unfreezingData: '',
				keyword: '',
				status: 1,
				reqData: {},
				sRes: '',
				thawing_time: '',
				inputaddaccount: '',
				merchant_order_id: '',
			});
			const tapTab = idx => {
				if (idx === data.tabCurIdx) {
					return;
				}
				data.page = 1;
				data.pledgeList = [];
				data.tabCurIdx = idx;
				data.status = data.tabs[data.tabCurIdx].status;
				API_pledgeList();
			};
			const listRef = ref();
			onLoad(e => {
			});
			onShow(() => {
				API_pledgeList();
			});
			onReachBottom(() => {
				API_pledgeList();
			})
			const API_pledgeList = async () => {
				const sendData = {
					page: data.page,
					limit: 10,
					status: data.status,  //1进行中2已完成
					keyword: data.keyword,
				}
				let res = await uni.$request('basedata.pledgeList', sendData);
				console.log('res', res.data)
				if (res.data == '') { } else {
					data.pledgeList = data.pledgeList.concat(res.data);
					data.page = data.page + 1;
				}
			}
			//放大图片
			const previewImg = (datas) => {
				uni.$tools.previewImg(datas, 0);
			}
			const onSearch = (e) => {
				data.page = 1;
				data.pledgeList = [];
				data.tabCurIdx = 0;
				data.keyword = e.detail.value;
				console.log('data.keywordm', data.keyword)
				API_pledgeList();
			}
			const searchEnd = ({ loadingType, pageOneRes }) => {
				if (loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0) {
					data.sRes = 'empty';
				} else {
					data.sRes = loadingType;
				}
			}
			const call = (tel) => {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			}
			const copyClick = (cop) => {
				uni.setClipboardData({
					data: cop, //当前点击的地址
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			}
			const closewin = () => {
				data.show_heibg = false;
				data.show_beizhu = false;
				data.show_beizhu2 = false;
				data.show_time = false;
				data.show_deduction = false;
				data.show_unfreezing = false;

			}
			const logOpen = (id) => {
				var list = data.pledgeList;
				for (var i = 0; i < list.length; i++) {
					if (list[i].id == id) {
						list[i].is_show = !list[i].is_show;
					}
				}
				// data.pledgeList[id].is_show = true;
			}

			const openwin = (merchant_order_id, dtype) => {
				data.merchant_order_id = merchant_order_id;
				data.show_heibg = true;
				if (dtype == 1) {
					data.show_beizhu = true;
				} else if (dtype == 2) {
					data.show_time = true;
				}
			}
			const ckdeduction = (datas) => {
				data.deductionData = datas;
				data.show_deduction = true;
				data.show_heibg = true;
			}
			const ckunfreezing = (datas) => {
				data.unfreezingData = datas;
				data.show_unfreezing = true;
				data.show_heibg = true;
			}

			const openwin2 = (cont) => {
				data.bz_content = cont;
				data.show_heibg = true;
				data.show_beizhu2 = true;
			}
			const ck_addcont = async () => {

				const sendData = {
					merchant_order_id: data.merchant_order_id,
					content: data.inputaddaccount,
				}
				let res = await uni.$request('basedata.addcontent', sendData);
				console.log('res', res)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				data.inputaddaccount = '';
				data.show_heibg = false;
				data.show_beizhu = false;
				data.page = 1;
				data.pledgeList = [];
				API_pledgeList();
			}
			const ck_time = async () => {

				const sendData = {
					merchant_order_id: data.merchant_order_id,
					thawing_time: data.thawing_time,
				}
				let res = await uni.$request('basedata.updateThawing', sendData);
				console.log('res', res)
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				data.show_heibg = false;
				data.show_time = false;
				data.page = 1;
				data.pledgeList = [];
				API_pledgeList();
			}
			return {
				...toRefs(data),
				tapTab,
				call,
				listRef,
				searchEnd,
				onSearch,
				API_pledgeList,
				ck_addcont,
				ck_time,
				logOpen,
				closewin,
				openwin,
				openwin2,
				copyClick,
				ckdeduction,
				ckunfreezing,
				previewImg
			};
		}
	});
	export default orders;
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.merchant_logBox {
		border-left: 2px solid #256ae5;
		position: relative;
		margin: 10rpx 0;

		.merchant_logitem {
			margin-left: 10rpx;

			.typeBox {
				margin-top: 10rpx;

				.typetime {
					color: #666;
					font-size: 26rpx;
					padding: 10rpx 0;
				}

				.typedesc {
					overflow: hidden;

					.desc {
						float: left;
						display: inline-block;
						line-height: 40rpx;
						background: #9ceebe;
						color: #00aa00;
						font-size: 22rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
					}

					.descbtn {
						float: left;
						line-height: 40rpx;
						color: #666;
						margin-left: 30rpx;
						font-size: 26rpx;
					}

					.typebtn {
						display: inline-block;
						height: 60rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						border: 2px solid #3E6FEF;
						border-radius: 10rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 26rpx;
						color: #3E6FEF;
						margin: 10rpx auto;
					}
				}

				.typetitle {
					overflow: hidden;
					font-size: 28rpx;

					.yuan {
						width: 12rpx;
						height: 12rpx;
						border-radius: 10rpx;
						background: #256ae5;
						position: absolute;
						left: -8rpx;
					}

					.tl {
						float: left;
					}

					.tr {
						float: right;
						text-align: right;
						color: #256ae5;
					}
				}
			}
		}
	}

	.btn-sec {
		width: 710rpx;
		height: 80rpx;
		background: #3E6FEF;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 60rpx auto;
	}

	.addcontentBox {
		width: 750rpx;
		padding: 0 20rpx 20rpx;
		background: #fff;
		border-radius: 10rpx 10rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		.line {
			overflow: hidden;
			line-height: 100rpx;

			.linl {
				width: 200rpx;
				float: left;
				line-height: 100rpx;
			}

			.linr {
				width: 450rpx;
				float: right;
				text-align: right;
				line-height: 100rpx;
			}
		}

		.timetips {
			line-height: 1.2;
			font-size: 26rpx;
		}

		.texts {
			overflow: hidden;
			background: #f7f7f7;
			padding: 0 20rpx;
			margin: 20rpx 0;

			.inp {
				line-height: 100rpx;
				height: 100rpx;
				float: left;
				background: #f7f7f7;
			}

			view {
				float: right;
				line-height: 100rpx;
				height: 100rpx;
				background: #f7f7f7;
			}
		}



		.textarea {
			width: 710rpx;
			height: 300rpx;
			background: #f7f7f7;
			border-radius: 20rpx;
			line-height: 1.5;
			padding: 10rpx;
		}

		.ttitle {
			text-align: center;
			overflow: hidden;
			position: relative;

			view {
				height: 100rpx;
				line-height: 100rpx;
			}

			image {
				width: 30rpx;
				position: absolute;
				right: 20rpx;
				top: 35rpx;
			}
		}
	}

	.heibg {
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.merchant_log {
		background: #f7f7f7;
		padding: 20rpx;
	}

	.plistBox {
		width: 710rpx;
		margin: 20rpx 20rpx 0;
		padding: 20rpx;
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;

		.merchant_top {
			overflow: hidden;

			.merchant_tit {
				float: left;
			}

			.merchant_r {
				float: right;
				color: #666;
			}
		}

		.pbtnBox {
			display: flex;
			margin: 20rpx 0;
			justify-content: space-around;
			padding: 20rpx 0 0;

			.pbtn {
				flex: 1;
				display: inline-block;
				line-height: 80rpx;
				background: #256ae5;
				margin: 0 10rpx;
				color: #fff;
				font-size: 22rpx;
				// padding: 0 20rpx;
				border-radius: 10rpx;
				text-align: center;

			}
		}

		.lastlinBox {
			width: 710rpx;
			margin: 20rpx 0;
			padding: 0 20rpx 0;
			border-radius: 20rpx;
			background: #fff;
			overflow: hidden;

			.lastline {
				overflow: hidden;

				.lineitem:nth-child(odd) {
					border-right: 1px solid #ededed;
				}

				.lineitem {
					width: 50%;
					float: left;
					box-sizing: border-box;
					text-align: center;
					line-height: 100rpx;
					margin: 0rpx 0;

					.tit {
						font-size: 26rpx;
						color: #666;
						line-height: 60rpx;
					}

					.num {
						font-size: 40rpx;
						color: #000;
					}

					.desc1 {
						font-size: 26rpx;
						color: #E62019;
					}

					.desc {
						font-size: 26rpx;
						color: #256ae5;
					}
				}
			}
		}

		.pmsg {
			border-bottom: 1px solid #ededed;

			.pline {
				line-height: 50rpx;
				font-size: 30rpx;
				padding: 5rpx 0;
			}

			.pline1 {
				overflow: hidden;
				padding: 5rpx 0;

				.pleft {
					float: left;
					line-height: 50rpx;
					font-size: 30rpx;
				}

				.pbtn {
					float: right;
					display: inline-block;
					line-height: 40rpx;
					background: #fff;
					color: #00aaff;
					border: 1px solid #00aaff;
					box-sizing: border-box;
					font-size: 22rpx;
					padding: 0 10rpx;
					border-radius: 10rpx;
					margin-top: 5rpx;
				}
			}

			.pline {}
		}
	}

	// .page {
	// 	padding-top: 30rpx;
	// }
	.p-search {
		height: 80rpx;
		position: fixed;
		/* #ifdef H5 */
		top: calc(var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		z-index: 2;
		width: 100%;
		background-color: #fff;

		.section {
			margin: 0 30rpx;
			// padding: 24rpx;
			height: 80rpx;
			padding: 0 24rpx;
			background-color: #f2f2f2;
			border-radius: 20rpx;

			.image_4 {
				width: 32rpx;
				height: 32rpx;
			}

			.inpt {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				font-family: PingFang;
				margin-left: 15rpx;
				flex: 1;
			}
		}

		.space-x-15 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 15rpx;
			}
		}
	}

	.p-search-placer {
		width: 100%;
		height: 80rpx;
	}

	.p-tab {
		// padding: 0 30rpx;
		position: fixed;
		/* #ifdef H5 */
		top: calc(var(--window-top) + 80rpx);
		/* #endif */
		/* #ifndef H5 */
		top: 80rpx;
		/* #endif */

		left: 0;
		z-index: 2;
		width: 100%;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;

		// box-shadow: 0 1rpx 4rpx rgba(0,0,0,.1);
		.tab-wrap {
			.txt {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333;
				line-height: 80rpx;
			}

			text-align: center;
			width: 50%;
			height: 80rpx;

			position: relative;

			.count {
				position: absolute;
				top: 6rpx;
				right: 16rpx;
				z-index: 2;
				border-radius: 100rpx;
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				font-size: 24rpx;
				color: #fff;
				background-color: #E62019;
			}

			&.active {
				color: #256ae5;

				&::after {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 14rpx;
					content: '';
					width: 40rpx;
					height: 3rpx;
					background: #256ae5;
					border-radius: 4rpx;
				}
			}
		}
	}

	.p-tab-placer {
		width: 100%;
		height: 80rpx;
	}
</style>